<template>
  <div>
    <div class="list-container">
      <div class="swiper-container" ref="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img class="img img1" src="" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="img img2" src="" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="img img3" src="" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="img img4" src="" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="img img5" src="" alt="" />
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
    <div class="download">
      <a href="#">
        <img class="downloadCenter download1" src="./images/kugou7.png" />
        下载电脑版
      </a>
      <a href="#">
        <img class="downloadCenter download1" src="./images/kugou8.png" />
        下载iPhone版
      </a>
      <a href="#">
        <img class="downloadCenter download1" src="./images/kugou9.png" />
        下载Android版
      </a>
    </div>
  </div>
</template>

<script>
// 引入swiper
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
  name: "Banner",
  // 挂载的时候使用轮播图组件
  mounted() {
    new Swiper(this.$refs.swiper, {
      // 左右轮播图间隔的距离
      spaceBetween: 10,
      effect: "fade",
      // 第一张轮播图往第二张轮播图切换总共的时间
      speed: 2000,
      // 无限轮播 从第一张开始
      loop: true,
      autoplay: {
        // 一张轮播图延迟一秒
        delay: 1000,
        // 点击之后禁用轮播 默认为false
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      // navigation 导航 左右按钮切换
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  },
};
</script>

<style lang="less" scoped>
.list-container {
  width: 100%;
  height: 500px;
  line-height: 500px;
  margin: 0 auto;
}

.swiper-wrapper {
  width: 100%;
}

.swiper-slide img {
  width: 100%;
  height: 500px;
}

.swiper-button-next,
.swiper-button-prev {
  display: none;
  color: #56cfe1;
}
.swiper-wrapper:hover .swiper-button-next,
.swiper-wrapper:hover .swiper-button-prev {
  display: block;
  color: #56cfe1;
}

.img {
  width: 100%;
  height: 500px;
}

.img1 {
  background: url("./images/kugou1.jpg") no-repeat center top;
}

.img2 {
  background: url("./images/kugou2.jpg") no-repeat center top;
}

.img3 {
  background: url("./images/kugou3.jpg") no-repeat center top;
}

.img4 {
  background: url("./images/kugou4.jpg") no-repeat center top;
}

.img5 {
  background: url("./images/kugou5.jpg") no-repeat center top;
}

.download {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  z-index: 20;
}

.download a {
  display: flex;
  align-items: center;
  width: 260px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.downloadCenter {
  width: 46px;
  height: 46px;
}
</style>
